<template>
  <div>
    <div class="gva-search-box icey_bg">
      <el-row>
        <el-col :span="6">
          <el-form ref="searchForm" :model="searchForm">
            <el-form-item prop="search" label="关键字">
              <el-input v-model="searchForm.search" placeholder="请输入关键字查询" clearable/>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="SearchTasks" icon="Search" style="margin-left: 10px">
            查询
          </el-button>
        </el-col>
      </el-row>
      <div>
        <el-button type="primary" @click="this.TaskForm = this.TaskFormInit;dialogFormVisible = true;getAllPoc()" icon="Plus" round
                   style="margin-left: 10px">
          新建扫描任务
        </el-button>
      </div>

      <div>
        <el-table :data="taskData">
          <el-table-column type="index" label="序号" width="60"/>
          <el-table-column align="left" label="任务ID" min-width="40" prop="id">
          </el-table-column>
          <el-table-column align="left" label="目标" min-width="40" prop="target">
          </el-table-column>
          <el-table-column align="left" label="任务说明" min-width="40" prop="remarks">
          </el-table-column>
          <el-table-column align="left" label="创建者" min-width="40" prop="operator">
          </el-table-column>
          <el-table-column align="left" label="状态" min-width="40" prop="status">
            <template #default="scope">
              <div v-if="scope.row.status == 'down'">
                <el-tag
                    class="mx-1"
                    type="success"
                    effect="light">
                  down
                </el-tag>
              </div>
              <div v-if="!scope.row.status == 'running'">
                <el-tag
                    class="mx-1"
                    type="danger"
                    effect="light">
                  running
                </el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" fixed="right" label="操作" width="200">
            <template #default="scope">
              <el-button
                  icon="delete"
                  size="small"
                  type="primary"
                  link
                  @click="deleteTaskFunc(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-dialog v-model="dialogFormVisible" title="新建扫描任务">
        <template #default>
          <el-form :model="TaskForm">
            <el-row :gutter="20">
              <el-col :span="16" :offset="4">
                <el-form-item label="任务说明：" prop="remarks">
                  <el-input :rows="3"
                            type="textarea"
                            v-model="TaskForm.remarks" max="20px"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="16" :offset="4">
                <el-form-item label="扫描类型：" prop="type">
                  <el-radio-group v-model="TaskForm.type" class="ml-4">
                    <el-radio label="all" default>加载所有规则</el-radio>
                    <el-radio label="multi">自定义多个规则</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <div v-if="TaskForm.type == 'multi'">
              <el-row :gutter="20">
                <el-col :span="16" :offset="4">
                  <el-select
                      v-model="TaskForm.vul_list"
                      multiple
                      filterable
                      placeholder="Select"
                      style="width: 490px"
                  >
                    <el-option
                        v-for="item in ruleList"
                        :key="item.vul_id"
                        :label="item.desp_name"
                        :value="item.vul_id"
                    />
                  </el-select>
                </el-col>
              </el-row>
            </div>
            <el-row :gutter="20">
              <el-col :span="16" :offset="4">
                <el-form-item label="测试目标类型：" prop="targetType">
                  <el-radio-group v-model="TaskForm.targetType" class="ml-4">
                    <el-radio label="url" >单个url</el-radio>
<!--                    <el-radio label="row">请求raw文件</el-radio>-->
                    <el-radio label="list">url列表</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <div v-if="TaskForm.targetType == 'url'">
              <el-row :gutter="20">
                <el-col :span="16" :offset="4">
                  <el-form-item label="测试目标：" prop="target">
                    <el-input v-model="TaskForm.target" placeholder="请输入目标网址"/>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>

            <div v-if="TaskForm.targetType != 'url'">
              <el-row :gutter="20">
                <el-col :span="16" :offset="4">
                  <el-form-item label="上传：" prop="target">
                    <el-upload
                        ref="upload"
                        class="upload-demo"
                        :limit="1"
                        :auto-upload="false"
                        v-model="TaskForm.target"
                    >
                      <template #trigger>
                        <el-button type="primary" disabled>select file</el-button>
                      </template>
                    </el-upload>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>

          </el-form>
        </template>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="createTask">
              确定
            </el-button>
            <el-button @click="dialogFormVisible = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {deleteTask, getTaskList} from "@/api/my/loophole/task";
import {ElMessage} from "_element-plus@2.2.9@element-plus";
import {batchTestUrl, getRuleList} from "@/api/my/loophole/rule";
import {onUnmounted, ref} from "vue";


export default {
  name: "taskList",
  setup() {

  },
  data() {
    return {
      searchForm: {
        search: '',
      },
      dialogFormVisible: false,
      taskData: [],
      TaskForm: {
        remarks: '',
        target: '',
        targetType: 'url',
        type: 'all',
        vul_list: []
      },
      TaskFormInit: null,
      ruleList: [],
      timerId: null,
    }
  },
  mounted() {
    this.SearchTasks()
    this.TaskFormInit = this.TaskForm
    this.startTimer()
  },
  unmounted() {
    clearInterval(this.timerId);
    this.timerId = null
  },
  methods: {
    startTimer() {
      this.timerId = setInterval(() => {
        // 定时执行的操作
        this.SearchTasks()
      }, 1000*5)
    },
    SearchTasks() {
      getTaskList({
        search: this.searchForm.search,
        page: 1,
        pagesize: 100,
      }).then(resp => {
        if (resp.code == 0) {
          this.taskData = resp.data.data
        } else {
          ElMessage.error(resp.msg)
        }
      })
    },
    getAllPoc() {
      getRuleList({
        page: 1,
        pagesize: 999,
      }).then(resp => {
        console.log(resp)
        this.ruleList = resp.data.data
      })
    },

    createTask() {
      console.log(this.TaskForm)
      batchTestUrl(this.TaskForm).then(resp =>{
        if (resp.code == 0){
          ElMessage.success(resp.msg)
          this.dialogFormVisible = false
          this.SearchTasks()
        }
      })
    },
    deleteTaskFunc(item) {
      if (confirm("确定删除：" + item.target + " ?")) {
        // 用户单击了“确认”按钮，执行删除操作
        deleteTask(item.id).then(res => {
          if (res.code == 0) {
            ElMessage.success('删除成功！')
            this.SearchTasks()
            return
          } else {
            ElMessage.error(res.msg)
          }
        })
      }
    },
  },
}
</script>

<style scoped>

</style>